{% extends "post/main-page.html" %}

{% block title %}
  快乐叮叮
{% endblock %}


{% block content %}
  <div class="container my-5" id="app">
    <div v-if="loading">
      <h3>
        <div class="spinner-border" role="status">
          <span class="sr-only">Loading...</span>
        </div>
        loading ...
      </h3>
    </div>
    <div v-else class="row">
      <div class="col-lg-4 col-md-6 col-xs-12 justify-content-center" v-for="obj in object_list">
        <div class="card my-1" >
          <img :src="obj.preview" alt="预览图" width="100%">
          <div class="card-body">
            <h6>[[ obj.title ]]</h6>
            <p class="text-muted card-text">[[ obj.desc ]]</p>
            <p v-show="is_pc()" class="text-left">
              <small class="text-muted text-success">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                  <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                </svg>
                [[ obj.pv ]]
              </small>
              &nbsp;
              <small class="text-muted">[[ obj.created_time.toLocaleDateString() ]]</small>
            </p>
          </div>
          <a :href="obj.url" class="stretched-link" target="_blank" @click="add_pv(obj.id)"></a>
        </div>
      </div>
    </div>

{#    点击加载更多#}
    <button class="btn btn-light form-control" style="text-decoration:underline;" @click="load_post(next)" :disabled="!next">
      [[ next ? '点击加载更多' : '没有更多内容了' ]]
    </button>
  </div>
{% endblock %}


{% block extra_script %}
<script>
var csrf_token = '{{ csrf_token }}';
var vm = new Vue({
    el: '#app',
    data: {
        object_list: [],
        error: null,
        loading: true,
        next: '{% url "summary-list" %}?type__lt=5',
    },
    methods: {
        load_post: function(url) {
            //  获取推荐文章
            axios.get(url+"&category=mainpage")
                 .then(res => {
                     var obj_list = res.data.results;
                     for (let i=0; i < obj_list.length; ++i) {
                         obj_list[i].created_time = new Date(obj_list[i].created_time);
                     }
                     this.object_list = this.object_list.concat(obj_list);
                     this.next = res.data.next;
                 })
                 .catch(err => this.error = err)
                 .finally(res => this.loading = false);
        },
        add_pv: function (post_id) {
            //  增加page view （pv）
            let url = `{% url "summary-list" %}${post_id}/visit_count/`;
            axios.patch(url, {id: post_id}, {headers: {'X-CSRFToken': csrf_token}})
                 .then(res => {
                     let data = res.data;
                 })
                 .catch(err => console.log(err));
        },
        is_pc: function() {
           var userAgentInfo = navigator.userAgent;
           var Agents = ["Android", "iPhone",
              "SymbianOS", "Windows Phone",
              "iPad", "iPod"];
           var flag = true;
           for (var v = 0; v < Agents.length; v++) {
              if (userAgentInfo.indexOf(Agents[v]) > 0) {
                 flag = false;
                 break;
              }
           }
           return flag;
        },
    },
    delimiters: ['[[', ']]'],
    mounted() {
        this.load_post(this.next+"&category=mainpage");
    }
})
</script>
{% endblock %}
